CSS property - position

Bronnen

Kevin Kononenko, CSS Positioning Explained By Building An Ice Cream Sundae, 28 augustus 2016

1. Static

   Voor alle elementen in HTML is het position attribuut standaard ingesteld op static. Dit betekent dat de elementen weergegeven worden in de volgorde waarin ze geplaatst zijn in het HTML element, wat we de Natuurlijke flow van elementen op een pagina noemen.

   We hebben een aantal mogelijkheden om de positie van een element op de pagina beinvloeden en uit de natuurlijke volgorde te halen. Dat zijn:

   • position: fixed
   • position: relative
   • position: absolute

2. Relative

   Met position: relative wordt een element gepositioneerd ten opzichte van zijn static positie. Dat doe je bijvoorbeeld door een top, left, right en/of een bottom waarde toe te kennen aan het element. De instelling position: relative maakt het dus mogelijk om een element te positioneren ten opzichte van de position: static die dit element standaard heeft.

   Of anders gezegd: hetzelfde als static, maar voor alle kinderelementen wordt de linkerbovenhoek nu de referentie van het coördinatenstelsel.

3. Absoluut

   Bij het absoluut positioneren van een element moet je twee concepten onthouden:

   1. ouder-kind relaties:

      In HTML is elk element een op z'n minst een kind-element van het HTML element. De HTML-tag omsluit alle andere tags, en is daardoor het ouder-element van alle andere html- elementen. Op een meer technische manier zeggen we dat alle andere elementen genest zijn in het HTML-element en dus kinderen van het HTML-elementen zijn. Een kind-element is dus genest dus in een ouder-element, en een ouder-lementen is ouder van alle elementen die er in genest zijn.

   2. het absoluut positioneren van een element gebeurd ten opzichte van het eerste gepositioneerde ouder-element:

      Nu weet je wat ouder- en kind-elementen zijn, is het absoluut positioneren ten opzichte van het eerste gepositioneerde ouder-element, gemakkelijker te begrijpen. Een absoluut gepositioneerd element is gepositioneerd ten opzichte van het eerst gepostioneerde ouder-element. Dit betekent dat een element dat je absoluut positioneert door alle ouder-elementen loopt totdat het het eerste, namelijk een html element tegenkomt, of een elementen waarvan het position attribuut is ingesteld op relative of absolute. Op dat element baseert het te positioneren element zijn positie.